<template>
	<z-paging ref="paging" :refresher-end-bounce-enabled="false" :refresher-complete-duration="300" :refresher-complete-delay="500"
	v-model="dataList"
	@query="queryList"
	:auto="true" 
	:default-page-size="15"
	loading-more-no-more-text="已经到底线了">
		<view class="d-flex flex-column rechargeRecord_content" :style="{width:windowWidth+'px'}">
			<view class="d-flex box" v-for="(item, index) in dataList" :key="index" :style="{width:windowWidth-20+'px'}">
				<view class="box_icon">
					<image src="/static/images/bi_47.png" mode=""></image>
				</view>
				<view class="box_txt">
					<view class="box_txt_titleT">
						{{ item.name +(item.amount?'：'+(item.amount+'元'):'')}}
					</view>
					<view class="box_txt_timeT">
						{{ item.create_at }}
					</view>
				</view>
				<view class="d-flex flex-shrink flex-column a-end box_kandian">
					<text class="d-flex flex-shrink">{{ item.recharge_type === 2 ? '' : '永久看币:' + item.ml_coin}}</text>
					<text class="d-flex flex-shrink" style="margin-top: 3px;">{{ item.recharge_type === 2 ? '' : '赠送看币:' + item.give_coin}}</text>
				</view>
			</view>
		</view>
	</z-paging>
</template>


<script>
	import {
		mapState
	} from 'vuex';
	import interfaces from "@/utils/interfaces.js"
	import config from "@/utils/config.js"
	export default {
		components: {
		},
		computed: {
			...mapState({
				windowWidth: state => state.layout.windowWidth
			})
		},
		data() {
			return {
				dataList:[]
			}
		},
		methods: {
			queryList(pageNum, pageSize) {
				// console.log(pageNum, pageSize)
				let self = this;
				self.request({
					url: interfaces.user_rechargeRecord_list,
					data:{"page": pageNum},
					method:"POST",
					success: (res)=>{
						// console.log("充值记录",res)						
						if (pageNum == 1) {
							self.dataList = []
						}
						self.$refs.paging.complete(res.content)
						self.dataList = self.dataList.concat(res.content)
					},
					fail:(e) => {
						self.$refs.paging.complete(false)
					}
				});
			}
		}
	}
	
</script>	

<style lang="scss">
	.rechargeRecord_content{
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
		align-items: center;
		padding: 15px;
		padding-bottom: 0px;
		
		.box{
			display: flex;
			box-sizing: border-box;
			// width: 100%;
			height: 180rpx;
			border-radius: 10px;
			box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);
			margin-bottom: 15px;
			align-items: center;
			background-color: #ffffff;
			
			.box_icon {
				flex-shrink: 0;
				width: 40px;
				height: 40px;
				border-radius: 100%; //圆形
				margin: 0px 10px 0px 10px;
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
					// background-color: red;
				}
			}
			.box_txt {
				display: flex;
				box-sizing: border-box;
				flex-direction: column;
				overflow: hidden;
				width: 100%;
								
				.box_txt_titleT {
					font-size: 14px;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #3D3D3D;
				}
				.box_txt_timeT{
					font-size: 13px;
					color: #8C8C8C;
					margin-top: 5px;
				}
			}
			
			.box_kandian{
				font-size: 13px;
				font-weight: 700;
				margin-left: 5px;
				margin-right: 15px;
				color: #E68B3E;
			}
		}
		
	}

</style>

